import levelIcon1 from '@/assets/level-icon-1.png'
import levelIcon2 from '@/assets/level-icon-2.png'
import levelIcon3 from '@/assets/level-icon-3.png'
import levelIcon4 from '@/assets/level-icon-4.png'

// 动态获取图表
export function computeTwoMainAndOneKeyIcon (data) {
  const {
    levelId
  } = data
  if (levelId === 1) {
    return levelIcon1
  } else if (levelId === 2) {
    return levelIcon2
  } else if (levelId === 3) {
    return levelIcon3
  } else {
    return levelIcon4
  }
}

// 动态获取图表
export function computeIcon (data) {
  return computeTwoMainAndOneKeyIcon(data)
}
// 默认弹窗内容
export function modalConentInnerHtml (config) {
  return `
    <table border="0" class="map-modal-table">
        <tr class="map-modal-table-row">
          <td class="map-modal-table-col-td">名称：</td>
          <td class="map-modal-table-col-td">${config.mainName}</td>
        </tr>
        <tr class="map-modal-table-row">
          <td class="map-modal-table-col-td">类型：</td>
          <td class="map-modal-table-col-td">${['', '重大危险源', '重点监管工艺', '重点监控化学物品'][config.typeId]}</td>
        </tr>
        <tr class="map-modal-table-row">
          <td class="map-modal-table-col-td">级别：</td>
          <td class="map-modal-table-col-td">${config.levelName}</td>
        </tr>
        <tr class="map-modal-table-row">
          <td class="map-modal-table-col-td">区域位置：</td>
          <td class="map-modal-table-col-td">${config.areaLocation}</td>
        </tr>
        <tr class="map-modal-table-row">
          <td class="map-modal-table-col-td">责任人：</td>
          <td class="map-modal-table-col-td">${config.dutyUserName}</td>
        </tr>
        <tr class="map-modal-table-row">
          <td class="map-modal-table-col-td">档案信息：</td>
          <td class="map-modal-table-col-td">${config.archvieInfo}</td>
        </tr>
      </table>`
}

export function twoMainAndOneKey (config) {
  return `  
      <div class="map-modal-head">**************</div>
      <div class="map-modal-content" id="important-obj-detail-${config.id}"> ${modalConentInnerHtml(config)}</div>
      <div class="map-modal-footer"> </div>
  `
}

// Popup Dom 事件处理
export function mapPopupDomEevent (event) {
  const container = event.container // popup对应的DOM
  console.log(container);
}


// 最后输入入口 自定义Popup模板
export function bindLayerPopupTemplate (config) {
  let popupTemplate = twoMainAndOneKey(config)

  return `<div class="map-modal">
       ${popupTemplate}
    </div>`
}
